<template>
  <div id="OrderList">
    <!-- 查询区域 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="订单编号">
        <el-input v-model="searchForm.orderNumber" placeholder="请输入编号"></el-input>
      </el-form-item>
      <el-form-item label="订单进度">
        <el-select v-model="searchForm.orderStatus" placeholder="全部">
          <el-option label="全部" value=""></el-option>
          <el-option label="待付款" value="待付款"></el-option>
          <el-option label="完成(未评价)" value="完成(未评价)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间">
        <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="orderNumber" label="订单编号" width="300" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="showOrderDetails(scope.row)">{{ scope.row.orderNumber }} <i class="el-icon-view"></i></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="下单用户(账号)" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="showUserDetails(scope.row.consumer)">{{ scope.row.nickName }} <i class="el-icon-view"></i></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="shopName" label="接单商户" width="300" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="showMerchantDetails(scope.row)">{{ scope.row.shopName }} <i class="el-icon-view"></i></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="总金额" width="150" align="center"></el-table-column>
      <el-table-column prop="createDate" label="下单时间" width="300" align="center"></el-table-column>
      <el-table-column prop="conveyTag" label="订单进度" width="200" align="center"></el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px; text-align: right;"
    ></el-pagination>

<!--    订单详情-->
    <el-dialog title="订单详情信息" :visible.sync="dialogVisible" width="50%">
      <div>
        <el-divider content-position="left"><h6>基本信息</h6></el-divider>
        <el-row>
          <el-col :span="12"><label class="label">订单编号: {{ selectedOrder.orderNumber }}</label></el-col>
          <el-col :span="12"><label>下单时间: {{ selectedOrder.createDate }}</label></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><label>下单用户: {{ selectedOrder.nickName }}</label></el-col>
          <el-col :span="12"><label>接单商户: {{ selectedOrder.shopName }}</label></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><label>总金额: {{ selectedOrder.totalPrice }}</label></el-col>
          <el-col :span="12"><label>订单状态: {{ selectedOrder.conveyTag }}</label></el-col>
        </el-row>

          <el-divider content-position="left"><h6>详情信息</h6></el-divider>
          <el-table :data="orders" style="width: 100%">
            <el-table-column prop="productName" label="商品名称"></el-table-column>
            <el-table-column label="图片">
              <template slot-scope="scope">
                <img :src="'/img'+scope.row.productImage" alt="商品图片" style="width: 50px; height: 50px;">
              </template>
            </el-table-column>
            <el-table-column prop="price" label="单价(元)"></el-table-column>
            <el-table-column prop="quantity" label="数量"></el-table-column>
            <el-table-column prop="subtotal" label="小计(元)"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
          </el-table>
      </div>
      <!-- 分页区域 -->
      <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page.sync="currentPage2"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2"
          style="margin-top: 20px; text-align: right;"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>

    </el-dialog>

<!--    用户详情-->
    <el-dialog title="用户详情信息" :visible.sync="dialogVisible2" width="50%">
      <div>
        <el-divider content-position="left"></el-divider>
        <p style="font-weight: 600;font-size: 20px;color: black">用户信息</p>
        <el-divider content-position="left">基本信息</el-divider>
        <el-row>
          <el-col :span="12"><label>编号：{{ selectedUser.id }}</label></el-col>
          <el-col :span="12"><label>头像：</label>
            <img :src="'/img'+selectedUser.avatarImg" alt="用户头像" style="width: 50px; height: 50px;">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><label>账号：{{ selectedUser.loginName }}</label></el-col>
          <el-col :span="12"><label>密码：{{ selectedUser.password }}</label></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><label>昵称：{{ selectedUser.nickName }}</label></el-col>
          <el-col :span="12"><label>手机：{{ selectedUser.phone }}</label></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><label>姓名：{{ selectedUser.realName }}</label></el-col>
          <el-col :span="12"><label>性别：{{ selectedUser.gender}}</label></el-col>
        </el-row>
        <el-row>
          <el-col :span="24"><label>生日：{{ selectedUser.birthday }}</label></el-col>
        </el-row>
        <el-divider content-position="left">账户信息</el-divider>
        <el-row>
          <el-col :span="12"><label>账户余额：{{ selectedUser.balance }}</label></el-col>
          <el-col :span="12"><label>账户状态：{{ userStatusMessage }}</label></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><label>注册日期：{{ selectedUser.createDate }}</label></el-col>
          <el-col :span="12"><label>最近修改日期：{{ selectedUser.updateDate }}</label></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><label>商户状态：{{ merchantStatusMessage }}</label></el-col>
          <el-col :span="12"><label>供应商状态：{{ supplierStatusMessage }}</label></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><label>个人介绍：{{ selectedUser.introduce }}</label></el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">关闭</el-button>
      </span>
    </el-dialog>

    <!--    商户详情-->
    <el-dialog title="商户详情" :visible.sync="dialogVisible3" width="50%">

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "OrderList",
  data() {
    return {
      searchForm: {
        orderNumber: "",
        orderStatus: "",
        dateRange: []
      },
      tableData: [
        // 示例数据，实际应从后端获取
        {
          orderNumber: "",
          nickName: "",
          shopName: "",
          totalPrice: 0,
          createDate: "",
          conveyTag: "",
          consumer: {}
        },
        // 其他示例数据...
      ],
      currentPage: 1,
      currentPage2: 1,
      pageSize: 5,
      pageSize2: 5,
      total: 0,
      total2: 0,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      selectedOrder: {},
      selectedUser: {},
      orders: {},
      loginName: ""
    };
  },
  computed: {
    userStatusMessage() {
      if (this.selectedUser.status === 'C001-1') {
        return '正常';
      } else if (this.selectedUser.status === 'C001-2') {
        return '状态异常';
      } else {
        return this.selectedUser.status; // 默认返回原始值
      }
    },
    merchantStatusMessage() {
      if (this.selectedUser.merchantTag === 'S001-1') {
        return '普通用户';
      } else if (this.selectedUser.merchantTag === 'S001-4') {
        return '商户';
      } else {
        return this.selectedUser.merchantTag; // 默认返回原始值
      }
    },
    supplierStatusMessage() {
      if (this.selectedUser.supplierTags === 'S001-1') {
        return '普通用户';
      } else if (this.selectedUser.supplierTags === 'S001-4') {
        return '供货商';
      } else {
        return this.selectedUser.supplierTags; // 默认返回原始值
      }
    }
  },
  methods: {
    //初始化页面
    initTable() {
      Object.assign(this.searchForm, {"currentPage": this.currentPage, "pageSize": this.pageSize})
      this.$axios.post("http://localhost:8090/orders/getAllOder", this.searchForm).then(({ data }) => {
        console.log(data);
        this.tableData = data.records.map(record => ({
          consumer: record.consumer,
          orderNumber: record.orderNumber,
          nickName: record.consumer.nickName + "("+record.consumer.loginName+")",
          shopName: record.merchant.shopName,
          totalPrice: record.totalPrice + "元",
          createDate: record.createDate,
          conveyTag: this.getConveyTagText(record.conveyTag)
        }));
        this.total = data.total;
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '初始化失败!'
        });
      })
    },
    onSearch() {
      console.log("搜索:", this.searchForm);
      // 这里应该调用接口进行查询
    },
    onReset() {
      this.searchForm = { orderNumber: "", orderStatus: "", dateRange: [] };
      // 重置后重新加载数据
    },
    handleSizeChange() {
      this.initTable();
      // 更改每页显示条数
    },
    handleCurrentChange() {
      this.initTable();
      // 切换页码
    },
    getConveyTagText(conveyTag) {
      switch (conveyTag) {
        case 'P001-1':
          return '待发货';
        case 'P001-2':
          return '待收货';
        case 'P001-3':
          return '已收货';
        case 'P001-4':
          return '已提货';
        default:
          return conveyTag; // 默认返回原始值
      }
    },
    showOrderDetails(order) {
      this.selectedOrder = {
        orderNumber: order.orderNumber,
        createDate: order.createDate,
        shopName: order.shopName,
        nickName: order.nickName,
        totalPrice: order.totalPrice,
        conveyTag: order.conveyTag
      };
      this.initOrderDetails(order.orderNumber);
      this.dialogVisible = true;
    },
    showUserDetails(consumer) {
      console.log("查看用户详情:", consumer)
      this.selectedUser = {
        id: consumer.consumerId, //id
        loginName: consumer.loginName, //登录名称
        nickName: consumer.nickName, //昵称
        realName: consumer.realName, //真实姓名
        birthday: consumer.birth, //生日
        phone: consumer.phone, //电话
        gender: consumer.gender, //性别
        password: consumer.password, //密码
        balance: consumer.balance, //余额
        createDate: consumer.createDate, //创建时间
        updateDate: consumer.updateDate, //修改时间
        avatarImg: consumer.avatarImg, //图片路径
        introduce: consumer.introduce, //个签
        status: consumer.status, //是否删除
        merchantTag: consumer.merchantTag, //是否是商户
        supplierTags: consumer.supplierTag //是否是供应商
      }
      this.dialogVisible2 = true;
    },
    showMerchantDetails(merchant) {
      this.selectedOrder = merchant;
      this.dialogVisible3 = true;
    },
    // 根据订单编号查询该订单的所有商品
    initOrderDetails(orderNumber) {
      console.log("查看订单详情:", orderNumber);
      let obj = {"currentPage": this.currentPage, "pageSize": this.pageSize, "orderNumber": orderNumber};
      console.log(obj);
      this.$axios.post("http://localhost:8090/order-details/getOrderDetail", obj).then(({ data }) => {
        console.log(data);
        this.total2 = data.total;
        this.orders = data.records.map(record => ({
          productName: record.product.name,
          productImage: record.product.imgLink,
          price: record.product.price,
          quantity: record.amount,
          subtotal: record.subtotal,
          status: record.status
        }));
      })
    },
    //分页
    handleSizeChange2() {
      this.initOrderDetails(this.selectedOrder.orderNumber);
    },
    handleCurrentChange2() {
      this.initOrderDetails(this.selectedOrder.orderNumber);
    },
  },
  mounted() {
    this.initTable();
  }
};
</script>

<style scoped>
/* 添加一些样式以确保页面美观 */
.demo-form-inline {
  margin-bottom: 20px;
}
.el-table {
  margin-top: 20px;
}

/* 新增：设置表格单元格内容居中 */
.el-table .cell {
  text-align: center;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.el-table >>> .el-table__header tr th {
  background-color: lightgray;
  color: black;
}
label {
  display: inline-block;
  font-size: 18px;
}
